.homebox {
  width: 100%;
  height: 100%;
}

/* 头部 */
.head {
  width: 100%;
  height: 220px;
  display: flex;
  align-items: center;

  /* 头部左侧 */
  .head_lt {
    width: 490px;
    height: 210px;
    border-radius: 10px;
    margin-left: 2vw;

    img {
      width: 490px;
      height: 210px;
      border-radius: 10px;
    }
  }

  /* 头部右侧 */
  .head_rt {
    width: 1000px;
    height: 210px;
    margin-left: 2vw;
    border-radius: 10px;
    border: 1px solid #e6ebed;
    display: flex;
    flex-direction: column;

    .rthed {
      width: 100%;
      height: 50%;
      position: relative;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e6ebed;

      .rthed_lt {
        width: 20%;
        height: 90%;
        border-right: 1px solid #e6ebed;

        .phed {
          width: 100%;
          line-height: 40px;
          text-align: center;
        }

        .phed span:first-child {
          font-weight: 600;
          font-size: 24px;
        }

        .phed span:last-child {
          font-weight: 600;
          font-size: 18px;
          margin-left: 0.5vw;
        }

        .pbom {
          width: 100%;
          line-height: 40px;
          text-align: center;
          color: #b9b9b9;
        }
      }

      .rthed_rt {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;

        .dayp {
          width: 25%;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .dayp span:first-child {
          font-size: 32px;
          color: red;
        }

        .dayp span:last-child {
          font-size: 24px;
          font-weight: 550;
        }


      }



    }

    .rtbom {
      width: 100%;
      height: 50%;
      border-radius: 10px;

      p {
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 16px;
      }

      .icon-lingdang {
        color: #fbb95b;
        font-size: 30px;
      }

    }

    .rtbom p:first-child {
      margin-top: 18px;
    }
  }
}


/* 我的数据 */
.mydata {
  width: 1520px;
  height: 420px;
  margin-top: 50px;
  background: #fff;

  /* 标题部分 */
  .mydata_hed {
    width: 100%;
    height: 16%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .mydata_hedlt {
      height: 100%;
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      button {
        width: 100px;
        height: 40px;
        font-size: 16px;
        font-weight: 550;
        border: none;
        border-radius: 20px;
      }

    }

    .mydata_hedlt button:hover {
      color: blue;
      background: #f5f7fb;
    }

    .mydata_hedrt {
      font-size: 18px;
      color: rgb(100, 98, 98);
    }
  }

  /* 下半内容部分 */
  .mydata_bom {
    width: 100%;
    height: 84%;

    position: relative;
  }

}


/* 作品 */
.works {
  width: 1520px;
  height: 420px;
  margin-top: 50px;
  /* border: 1px solid red; */
  background: #fff;
}

.works_hed {
  width: 100%;
  height: 10%;
  /* background: goldenrod; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hed_title {
  font-size: 24px;
  width: 6%;
  text-align: center;
  font-weight: 550;
}

.lookworks {
  width: 8%;
  text-align: center;
  font-size: 18px;
  color: rgb(100, 98, 98);
}

.works_tabtitle {
  width: 100%;
  height: 90%;
  position: relative;

}



/* 精选模版 */
.templatesbox {
  width: 1520px;
  height: 450px;
  background: #fff;
  margin-top: 50px;
}

.templatesbox_hed {
  width: 100%;
  height: 10%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.templatesbox_hedtitle {
  font-size: 24px;
  width: 10%;
  text-align: center;
  font-weight: 550;
}

.lookmany {
  width: 8%;
  text-align: center;
  font-size: 18px;
  color: rgb(100, 98, 98);
}

/*精选模版下面内容部分 */
.templatesbox_body {
  width: 100%;
  height: 90%;
  background: #eeecec;
  position: relative;



  /* 左箭头 */
  .ltbtns {
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 50px;
    display: none;
    border: none;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
  }

  /* 右箭头 */
  .rtbtns {
    position: absolute;
    right: 0;
    top: 50%;
    display: none;
    width: 30px;
    height: 50px;
    border: none;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
  }

}

.templatesbox_body:hover {
  .ltbtns {
    display: block;
  }

  .rtbtns {
    display: block;
  }
}

.Internalbox {
  width: 1520px;
  height: 100%;
  display: flex;

  align-items: center;
  overflow: hidden;
  scroll-behavior: smooth;
  /* smooth: 这是 scroll-behavior 属性的一个值，表示当发生滚动时，浏览器将以平滑的动画方式进行滚动，而不是立即跳转到目标位置。这个效果使得用户在进行滚动时能够获得更好的视觉体验。 */


}

.listson {
  width: 232px;
  height: 390px;
  margin-left: 48px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  .listson_img {
    width: 100%;
    height: 90%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  p {
    width: 200px;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 16px;

    height: 33px;
    line-height: 33px;
  }
}

.listson:hover {
  transform: scale(1.1) translateY(-5px);
  /* 放大并向上移动 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  /* 加强阴影效果 */
}

/* 长页效果 */
.listsons {

  width: 232px;
  height: 390px;
  margin-left: 48px;
  background: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  .listson_imgs {
    /* position: relative; */
    width: 100%;
    height: 351px;
    overflow: hidden;

    img {
      /* position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      animation: scroll-up 10s linear infinite; */
      width: 100%;
    height:1755px;
    transition: transform 20s ease;
      /*                       （旋转、缩放、平移和倾斜） */
      /* 属性变化时的过渡效果  属性的变化设定过渡效果  变化将持续 20 秒*/
      /* ease: 这是过渡的计时函数（timing function），指定了动画的速度曲线。ease 是一个常用的值，表示在开始和结束的时候动画速度较慢，而在中间部分速度较快。这种方式能使过渡效果更加自然。 */
    }
  }



   .listson_imgs:hover img{
  transform: translateY(-1390px);
  /* 元素将向上移动 1390 像素 */
  }
  /* 鼠标离开后重置位置 */
  .listson_imgs:not(:hover) img{
  /* 回到起点 */
  transform: translateY(0);
  /* 取消动画 */
  transition:transform 1s ease;
  }

  p {
    width: 200px;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    font-size: 16px;

    height: 33px;
    line-height: 33px;
  }
}

/* @keyframes scroll-up {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(-100%)
  }
}

.listson_imgs:hover img {
  animation-play-state: running;
}
.listson_imgs:not(:hover) img{
  transform: translateY(0);
  animation: none;
}
.listson_imgs img{
  animation-play-state: paused;
} */

.listsons:hover {
  transform: scale(1.1) translateY(-5px);
  /* 放大并向上移动 */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  /* 加强阴影效果 */
}